<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>${statisticsDetails.title}</title>
</head>
<body>

<div id="account_statistics_details_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse" data-transition="slide">主页</a>

        <h1>${statisticsDetails.title}</h1>
        <a href="javascript:void(0);" data-icon="arrow-l" data-rel="back">返回</a>
    </div>
    <div data-role="content">
        <div class="center font-16">
            共<strong class="color-s">${statisticsDetails.totalSize}</strong>条明细信息
        </div>
        <ul data-role="listview" data-inset="true" data-count-theme="b" id="details_listview">
            <c:forEach items="${statisticsDetails.list}" var="account">
                <li data-theme="${account.style.label}">
                    <h3 class="${account.income?'red':''}">${account.typeName}
                        <c:if test="${not account.publicity}">
                            <img src="../../../images/mobile/lock.png" alt="private"/>
                        </c:if></h3>

                    <p><strong>${account.amount}</strong></p>

                    <p>${account.description} </p>

                    <p class="ui-li-aside">${account.accountDate}</p>
                </li>
            </c:forEach>
        </ul>
        <c:if test="${statisticsDetails.showMore}">
            <div data-role="controlgroup" id="st_details_more_div">
                <a href="javascript:void(0);" id="st_details_more_link" data-role="button" class="color-b">
                    更多 (<span
                        id="page_number">${statisticsDetails.pageNumber}</span>/${statisticsDetails.totalPages})<img
                        id="more_loading" src="${contextPath}/images/public/load.gif" alt="loading" class="more-img"/>
                </a>
            </div>
        </c:if>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="c">
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="javascript:void(0);" data-icon="arrow-l" data-rel="back">返回</a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var pageNumber = ${statisticsDetails.pageNumber};
        var totalSize = ${statisticsDetails.totalSize};
        var sType = '${statisticsDetails.type}';
        var sValue = '${statisticsDetails.value}';

        $("a#st_details_more_link").bind("click", function () {
            var $this = $(this).addClass("gray");
            var nextPageNumber = (++pageNumber);
            var loading = $("#more_loading").show();
            getData();
            function getData() {
                $.ajax({
                    url:"show_details/more",
                    data:{
                        pageNumber:nextPageNumber,
                        type:sType,
                        value:sValue,
                        totalSize:totalSize
                    },
                    success:function (data) {
                        var listview = $("#details_listview").append($.trim(data)).listview("refresh");
                        $this.removeClass("gray");
                        checkShowMore(listview);
                    }
                });
            }

            function checkShowMore(listview) {
                var addedSize = listview.find("li").size();
                if (addedSize == totalSize) {
                    $("#st_details_more_div").hide();
                } else {
                    loading.hide();
                }
                $this.find("#page_number").html(nextPageNumber);
            }
        });
    </script>
</div>
</body>
</html>